<template>
    <div>
        <div class="operarea">
            <div class="seach">
                <el-input v-model="seachForm.bh" placeholder="编码" clearable size="mini"></el-input>
                <el-input v-model="seachForm.brand" placeholder="品牌" clearable size="mini"></el-input>
                <el-input v-model="seachForm.name" :placeholder="$t('name')" clearable size="mini"></el-input>
                <el-input v-model="seachForm.color" placeholder="颜色" clearable size="mini"></el-input>
                <el-input v-model="seachForm.spec" placeholder="规格" clearable size="mini"></el-input>
                <el-input v-model="seachForm.remark" placeholder="备注" clearable size="mini"></el-input>
                <el-button size="mini" icon="el-icon-search" @click="getData"></el-button>
            </div>
        </div>
        <el-tabs v-model="seachForm.type" type="card" @tab-click="handleClick">
            <el-tab-pane label="成衣" name="clothe">
                <el-card class="cardBox">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item>面辅料库存</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-table style="width: 100%" :data="clotheTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                        <el-table-column prop="bh" min-width="130" :label="$t('encoding')">
                        </el-table-column>
                        <el-table-column prop="name" min-width="120" :label="$t('name')">
                        </el-table-column>
                        <el-table-column prop="brand" min-width="120" label="品牌">
                        </el-table-column>
                        <el-table-column :label="$t('image')">
                            <template v-slot="scope">
                                <el-image v-if="scope.row.pictureUrl !== '' && scope.row.pictureUrl !== null" :src="scope.row.pictureUrl" class="feelImg" :preview-src-list="getSrcList(scope.$index)"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="color" min-width="120" :label="$t('color')">
                        </el-table-column>
                        <el-table-column prop="spec" min-width="120" label="规格">
                        </el-table-column>
                        <el-table-column prop="up" min-width="120" :label="$t('unitprice')">
                        </el-table-column>
                        <el-table-column prop="stk" min-width="120" label="库存">
                        </el-table-column>
                        <el-table-column prop="unit" min-width="120" :label="$t('unit')">
                        </el-table-column>
                        <el-table-column prop="remark" min-width="140" label="备注">
                        </el-table-column>
                        <el-table-column prop="address" :label="$t('operation')" min-width="225">
                            <template v-slot="scope">
                                <el-button @click="showPull(scope.row)" size="mini">出库</el-button>
                                <el-button @click="showPut(scope.row.uuid)" size="mini">入库</el-button>
                                <el-button @click="showRecord(scope.row.uuid)" size="mini">操作记录</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        small
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :pager-count="11"
                        :current-page.sync="seachForm.pageNo"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="seachForm.pageSize"
                        layout="sizes, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="面料" name="fabric">
                <el-card class="cardBox">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item>面辅料库存</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-table style="width: 100%" :data="fabricTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                        <el-table-column prop="bh" min-width="130" :label="$t('encoding')">
                        </el-table-column>
                        <el-table-column prop="name" min-width="120" :label="$t('name')">
                        </el-table-column>
                        <el-table-column prop="brand" min-width="120" label="品牌">
                        </el-table-column>
                        <el-table-column :label="$t('image')">
                            <template v-slot="scope">
                                <el-image v-if="scope.row.pictureUrl !== '' && scope.row.pictureUrl !== null" :src="scope.row.pictureUrl" class="feelImg" :preview-src-list="getSrcList(scope.$index)"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="color" min-width="120" :label="$t('color')">
                        </el-table-column>
                        <el-table-column prop="spec" min-width="120" label="规格">
                        </el-table-column>
                        <el-table-column prop="up" min-width="120" :label="$t('unitprice')">
                        </el-table-column>
                        <el-table-column prop="stk" min-width="120" label="库存">
                        </el-table-column>
                        <el-table-column prop="unit" min-width="120" :label="$t('unit')">
                        </el-table-column>
                        <el-table-column prop="remark" min-width="140" label="备注">
                        </el-table-column>
                        <el-table-column prop="address" :label="$t('operation')" width="225">
                            <template v-slot="scope">
                                <el-button @click="showPull(scope.row)" size="mini">出库</el-button>
                                <el-button @click="showPut(scope.row.uuid)" size="mini">入库</el-button>
                                <el-button @click="showRecord(scope.row.uuid)" size="mini">操作记录</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        small
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :pager-count="11"
                        :current-page.sync="seachForm.pageNo"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="seachForm.pageSize"
                        layout="sizes, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="辅料" name="acc">
                <el-card class="cardBox">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item>面辅料库存</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-table style="width: 100%" :data="accTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                        <el-table-column prop="bh" min-width="130" :label="$t('encoding')">
                        </el-table-column>
                        <el-table-column prop="name" min-width="120" :label="$t('name')">
                        </el-table-column>
                        <el-table-column prop="brand" min-width="120" label="品牌">
                        </el-table-column>
                        <el-table-column :label="$t('image')">
                            <template v-slot="scope">
                                <el-image v-if="scope.row.pictureUrl !== null && scope.row.pictureUrl !== ''" :src="scope.row.pictureUrl" class="feelImg" :preview-src-list="getSrcList(scope.$index)"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="color" min-width="120" :label="$t('color')">
                        </el-table-column>
                        <el-table-column prop="spec" min-width="120" label="规格">
                        </el-table-column>
                        <el-table-column prop="up" min-width="120" :label="$t('unitprice')">
                        </el-table-column>
                        <el-table-column prop="stk" min-width="120" label="库存">
                        </el-table-column>
                        <el-table-column prop="unit" min-width="120" :label="$t('unit')">
                        </el-table-column>
                        <el-table-column prop="remark" min-width="140" label="备注">
                        </el-table-column>
                        <el-table-column prop="address" :label="$t('operation')" width="225">
                            <template v-slot="scope">
                                <el-button @click="showPull(scope.row)" size="mini">出库</el-button>
                                <el-button @click="showPut(scope.row.uuid)" size="mini">入库</el-button>
                                <el-button @click="showRecord(scope.row.uuid)" size="mini">操作记录</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        small
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :pager-count="11"
                        :current-page.sync="seachForm.pageNo"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="seachForm.pageSize"
                        layout="sizes, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="包装物" name="wrapper">
                <el-card class="cardBox">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item>面辅料库存</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-table style="width: 100%" :data="wrapperTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                        <el-table-column prop="bh" min-width="130" :label="$t('encoding')">
                        </el-table-column>
                        <el-table-column prop="name" min-width="120" :label="$t('name')">
                        </el-table-column>
                        <el-table-column prop="brand" min-width="120" label="品牌">
                        </el-table-column>
                        <el-table-column :label="$t('image')">
                            <template v-slot="scope">
                                <el-image v-if="scope.row.pictureUrl !== '' && scope.row.pictureUrl !== null" :src="scope.row.pictureUrl" class="feelImg" :preview-src-list="getSrcList(scope.$index)"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="color" min-width="120" :label="$t('color')">
                        </el-table-column>
                        <el-table-column prop="spec" min-width="120" label="规格">
                        </el-table-column>
                        <el-table-column prop="up" min-width="120" :label="$t('unitprice')">
                        </el-table-column>
                        <el-table-column prop="stk" min-width="120" label="库存">
                        </el-table-column>
                        <el-table-column prop="unit" min-width="120" :label="$t('unit')">
                        </el-table-column>
                        <el-table-column prop="remark" min-width="140" label="备注">
                        </el-table-column>
                        <el-table-column prop="address" :label="$t('operation')" width="225">
                            <template v-slot="scope">
                                <el-button @click="showPull(scope.row)" size="mini">出库</el-button>
                                <el-button @click="showPut(scope.row.uuid)" size="mini">入库</el-button>
                                <el-button @click="showRecord(scope.row.uuid)" size="mini">操作记录</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        small
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :pager-count="11"
                        :current-page.sync="seachForm.pageNo"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="seachForm.pageSize"
                        layout="sizes, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="绣花" name="emb">
                <el-card class="cardBox">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item>面辅料库存</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-table style="width: 100%" :data="embTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                        <el-table-column prop="bh" min-width="130" :label="$t('encoding')">
                        </el-table-column>
                        <el-table-column prop="name" min-width="120" :label="$t('name')">
                        </el-table-column>
                        <el-table-column prop="brand" min-width="120" label="品牌">
                        </el-table-column>
                        <el-table-column :label="$t('image')">
                            <template v-slot="scope">
                                <el-image v-if="scope.row.pictureUrl !== '' && scope.row.pictureUrl !== null" :src="scope.row.pictureUrl" class="feelImg" :preview-src-list="getSrcList(scope.$index)"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="color" min-width="120" :label="$t('color')">
                        </el-table-column>
                        <el-table-column prop="spec" min-width="120" label="规格">
                        </el-table-column>
                        <el-table-column prop="up" min-width="120" :label="$t('unitprice')">
                        </el-table-column>
                        <el-table-column prop="stk" min-width="120" label="库存">
                        </el-table-column>
                        <el-table-column prop="unit" min-width="120" :label="$t('unit')">
                        </el-table-column>
                        <el-table-column prop="remark" min-width="140" label="备注">
                        </el-table-column>
                        <el-table-column prop="address" :label="$t('operation')" width="225">
                            <template v-slot="scope">
                                <el-button @click="showPull(scope.row)" size="mini">出库</el-button>
                                <el-button @click="showPut(scope.row.uuid)" size="mini">入库</el-button>
                                <el-button @click="showRecord(scope.row.uuid)" size="mini">操作记录</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        small
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :pager-count="11"
                        :current-page.sync="seachForm.pageNo"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="seachForm.pageSize"
                        layout="sizes, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </el-card>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="出入库操作" :visible.sync="putorpullDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="putorpullDlogClose(updateMatNumForm)">
            <el-form :model="updateMatNumForm" :rules="updateMatNumRules" :ref="updateMatNumForm" class="motuoForm">
                <el-form-item :label="$t('number')" label-width="70px" prop="stk">
                    <el-input type="number" v-model="putorpullNum" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="70px" prop="remark">
                    <el-input v-model="updateMatNumForm.remark" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="putorpullDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="putorpullData(updateMatNumForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 记录 -->
        <el-dialog title="出入库记录" class="blockDlog" :visible.sync="recordDialogTableVisible">
            <el-table :data="recordTab">
                <el-table-column property="operatorName" label="操作人"></el-table-column>
                <el-table-column property="type" label="操作类型"></el-table-column>
                <el-table-column property="qty" label="数量"></el-table-column>
                <el-table-column property="remark" label="备注"></el-table-column>
                <el-table-column property="createTime" label="时间"></el-table-column>
            </el-table>
            <el-pagination
                small
                @size-change="handleRecordSizeChange"
                @current-change="handleRecordCurrentChange"
                :pager-count="11"
                :current-page.sync="putOrPullForm.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="putOrPullForm.pageSize"
                layout="sizes, prev, pager, next"
                :total="recordTotal">
            </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
import Cookie from 'js-cookie'
import {
    getMatFakeStkList,
    updateMatFakeStk,
    getStkFakeRecord
} from '@/libs/reqlist.js'
export default {
    data() {
        return {
            seachForm: {
                bh: '',
                name: '',	
                type: 'clothe',
                pageNo: 1,
                pageSize: 10
            },
            total: 0,
            clotheTab: [],
            fabricTab: [],
            accTab: [],
            wrapperTab: [],
            embTab: [],
            // 出入库数量
            putorpullNum: '',
            updateMatNumForm: {
                userId: 0,
                matId: '',
                stk: 0,
                remark: ''
            },
            updateMatNumRules: {
                stk: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ]
            },
            putorpullDialogVisible: false,
            isPutOrPull: 0,
            // 记录出库数量
            matPullNum: 0,
            // 出入库记录
            putOrPullForm: {
                matId: '',
                pageNo: 1,
                pageSize: 10
            },
            recordDialogTableVisible: false,
            recordTab: [],
            recordTotal: 0,
            imgList: []
        }
    },
    methods: {
        seachData() {
            this.imgList = []
            getMatFakeStkList(JSON.stringify(this.seachForm)).then(res => {
                if (res.data.code == 0) {
                    this.total = res.data.data.hits
                    res.data.data.data.forEach(item => {
                        if (item.pictureUrl !== '' && item.pictureUrl !== null) this.imgList.push(item.pictureUrl)
                    })
                    switch (this.seachForm.type) {
                        case 'clothe':
                            this.clotheTab = res.data.data.data
                            break
                        case 'fabric':
                            this.fabricTab = res.data.data.data
                            break
                        case 'acc':
                            this.accTab = res.data.data.data
                            break
                        case 'wrapper':
                            this.wrapperTab = res.data.data.data
                            break
                        case 'emb':
                            this.embTab = res.data.data.data
                            break
                    }
                }
            })
        },
        getData() {
            this.seachForm.pageNo = 1
            this.seachData()
        },
        handleSizeChange (newSize) {
            this.seachForm.pageSize = newSize
            this.seachData()
        },
        handleCurrentChange (newNum) {
            this.seachForm.pageNo = newNum
            this.seachData()
        },
        // 选项卡切换
        handleClick(tab) {
            this.seachForm.type = tab.name
            this.getData()
        },
        // 出库
        showPull(listItem) {
            this.isPutOrPull = 1
            this.updateMatNumForm.userId = Cookie.get('sysUserID') - 0
            this.updateMatNumForm.matId = listItem.uuid
            this.matPullNum = listItem.stk
            this.putorpullDialogVisible = true
        },
        // 入库
        showPut(id) {
            this.isPutOrPull = 2
            this.updateMatNumForm.userId = Cookie.get('sysUserID') - 0
            this.updateMatNumForm.matId = id
            this.putorpullDialogVisible = true
        },
        putorpullDlogClose(form) {
            this.putorpullNum = ''
            this.$refs[form].resetFields()
        },
        putorpullData() {
            switch (this.isPutOrPull) {
                case 2:
                    this.updateMatNumForm.stk = this.putorpullNum - 0
                    break
                case 1:
                    if (this.matPullNum - this.putorpullNum < 0) return this.$message.warning('库存数量不足')
                    this.updateMatNumForm.stk = 0 - this.putorpullNum
                    break
            }
            if (this.updateMatNumForm.stk == 0) return this.$message.warning('填写出入库数量')
            updateMatFakeStk(JSON.stringify(this.updateMatNumForm)).then(res => {
                if (res.data.code == 0) {
                    switch (this.isPutOrPull) {
                        case 2:
                            this.$message.success('入库成功')
                            break
                        case 1:
                            this.$message.success('出库成功')
                            break
                    }
                    this.putorpullDialogVisible = false
                    this.seachData()
                }
            })
        },
        showRecord(uuid) {
            this.putOrPullForm.matId = uuid
            getStkFakeRecord(JSON.stringify(this.putOrPullForm)).then(res => {
                if (res.data.code == 0) {
                    this.recordDialogTableVisible = true
                    res.data.data.data.forEach(item => {
                        switch (item.type) {
                            case 0:
                                item.type = '入库'
                                break
                            case 1:
                                item.type = '出库'
                                break
                        }
                        if (item.qty < 0) item.qty = Math.abs(item.qty)
                    })
                    this.recordTab = res.data.data.data
                    this.recordTotal = res.data.data.hits
                }
            })
        },
        handleRecordSizeChange (newSize) {
            this.putOrPullForm.pageSize = newSize
            this.showRecord()
        },
        handleRecordCurrentChange (newNum) {
            this.putOrPullForm.pageNo = newNum
            this.showRecord()
        },
        getSrcList(index) {
            return this.imgList.slice(index).concat(this.imgList.slice(0, index))
        }
    },
    mounted() {
        this.seachData()
    }
}
</script>

<style lang="less" scoped>
@import './sufMat.less';
</style>
